<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
  <meta charset="UTF-8">
  <meta name="Author" content="haley">
  <meta name="Keywords" content="前端最常用的UI插件">
  <meta name="Description" content="最常用的UI插件">
  <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"></script>
  <link crossorigin="anonymous" integrity="sha384-pdapHxIh7EYuwy6K7iE41uXVxGCXY0sAjBzaElYGJUrzwodck3Lx6IE2lA0rFREo" href="https://lib.baomitu.com/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/index.css" rel="stylesheet">
  <script crossorigin="anonymous" integrity="sha384-pPttEvTHTuUJ9L2kCoMnNqCRcaMPMVMsWVO+RLaaaYDmfSP5//dP6eKRusbPcqhZ" src="https://lib.baomitu.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-8t+aLluUVnn5SPPG/NbeZCH6TWIvaXIm/gDbutRvtEeElzxxWaZN+G/ZIEdI/f+y" src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/changeTitle.js"></script>
  <link href="imgs/favicon.ico" rel="shortcut icon">
  <title></title>
  <style>
    .btn{
      margin-right: 10px;
    }
  </style>
  <script>
    var data={
      title:'前端最常用的UI插件',
      list:[
        {
          title:'基础样式类',
          list:[
            {
              title:'base样式',
              href:'./pages/haley/base.html',
              className:'btn-info'
            }
            ,{
              title:'html页面基础配置',
              href:'./pages/ui/h5/index.html',
              className:'btn-info'
            }
          ]
        }
        ,{
          title:'多层叠加类',
          list:[
            {
              title:'tab选项卡',
              href:'./pages/moreLevel/tab.html',
              className:'btn-info'
            }
          ]
        }
        ,{
          title:'bootstrap常用案例 v3.3.7',
          list:[
            {
              title:'弹框（正常+小框+大框）',
              href:'./pages/boot/modal/index.html',
              className:'btn-info'
            }
          ]
        }

        ,{
          title:'常用的固定用法',
          list:[
            {
              title:'手写css动画（含过渡）',
              href:'./pages/animation/animation.html',
              className:'btn-info'
            }
            ,{
              title:'animate.css的使用',
              href:'./pages/animation/animate.html',
              className:'btn-info'
            }
          ]
        }
        ,{
          title:'样式控制类',
          list:[
            {
              title:'经常使用的CSS代码',
              href:'./pages/ui/front/index.html',
              className:'btn-info'
            }
            ,{
              title:'浮动多列，高度统一',
              href:'./pages/ui/sameHeight.html',
              className:'btn-info'
            }
            ,{
              title:'返回顶部和返回首页',
              href:'./pages/ui/toTop/index.html',
              className:'btn-info'
            }
            ,{
              title:'可关闭的右侧浮框',
              href:'./pages/ui/floatQuick/index.html',
              className:'btn-info'
            }
            ,{
              title:'数字跑秒特效',
              href:'./pages/ui/secondRun/index.html',
              className:'btn-info'
            }
            ,{
              title:'各种样式的弹框',
              href:'https://blog.csdn.net/qq_43746783/article/details/86139640',
              className:'btn-success'
            }
          ]
        }
        ,{
          title:'javascript轮子 -- 数组相关',
          list:[
            {
              title:'数组最小最大值',
              href:'./pages/jsWheel/array/array.html#max',
              className:'btn-info'
            }
            ,{
              title:'数组最小最大值',
              href:'./pages/jsWheel/array/array.html#min',
              className:'btn-info'
            }
            ,{
              title:'数组的拼接',
              href:'./pages/jsWheel/array/array.html#concat',
              className:'btn-info'
            }
            ,{
              title:'数组乱序',
              href:'./pages/jsWheel/array/disorder.html',
              className:'btn-info'
            }

          ]
        }
        ,{
          title:'javascript轮子 -- 字符串',
          list:[
            {
              title:'转义html标签',
              href:'./pages/jsWheel/string/string.html',
              className:'btn-info'
            }
            ,{
              title:'转义符换成普通html字符',
              href:'./pages/jsWheel/string/string.html',
              className:'btn-info'
            }

          ]
        }
        ,{
          title:'javascript轮子 -- 日期时间',
          list:[
            {
              title:'中文月日转为英文',
              href:'./pages/jsWheel/date/date.html',
              className:'btn-info'
            }
            ,{
              title:'倒计时',
              href:'./pages/jsWheel/date/countdown.html',
              className:'btn-info'
            }
          ]
        }
      ]
    };
  </script>
</head>
<body>
<div id="app">
  <div class="container">
    <h3 class="text-center">{{title}}</h3>
  </div>
  <ul class="container list-unstyled">
    <li class="panel panel-info" v-for="item in list">
      <div class="panel-heading">{{item.title}}</div>
      <div class="panel-body">
        <div>
          <a class="btn" :class="item2.className" target="_blank" v-for="item2 in item.list" :href="item2.href">{{item2.title}}</a>
        </div>
      </div>
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: data
  });
</script>
</body>
</html>
